<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>2-2 部分菜单的折叠动作</title>
    <link rel="stylesheet" href="../css/bootstrap-3.3.6.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        body {
            font-size: 1.6em;
            background: #c3d1ff;
        }

        .list-group .list-group-item {
            cursor: pointer;
        }

        .list-group span {
            margin-right: 10px;
        }
        .glyphicon-chevron-down{
            top: 3px;
            left: 3px;
        }
        a.highLight{
            color: red;
            background: #b2ffb3;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>音色列表</h1>
    <br>
    <div class="list-group row">
        <a class="list-group-item col-md-4"><span class="badge pull-left">1</span>钢琴</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">2</span>音高打击乐</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">3</span>风琴</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">4</span>吉他</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">5</span>贝斯</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">6</span>弦乐</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">7</span>弦乐合奏</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">8</span>铜管号类</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">9</span>簧片</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">10</span>笛</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">11</span>合成领奏</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">12</span>合成音色</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">13</span>合成效果</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">14</span>民族乐器</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">15</span>打击乐器</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">16</span>模拟音效</a>
        <a class="list-group-item col-md-4"><span class="badge pull-left">16</span>其他音色</a>
    </div>
    <br>

    <div class="form-group text-center">
        <button id="btn_show" class="btn btn-success"><span id="btn_text">点击显示全部音色</span> <span id="icon" class="glyphicon glyphicon-chevron-down"></span></button>
    </div>
</div>
<script src="../js/jquery-2.2.4.js"></script>
<script src="../js/main.js"></script>
<script>
    $(function () {
        var $hiddenlist = $(".list-group .list-group-item:gt(6):not(:last)");
        var $btn_text = $("#btn_text");
        var $icon = $("#icon");
        var $highLight = $(".list-group-item:contains('钢琴'),.list-group-item:contains(吉他), .list-group-item:contains('笛'), .list-group-item:contains('民族乐器')");
        $hiddenlist.hide();

        $(".list-group a").addClass("list-group-item-info");
        $("#btn_show").click(function() {
            if (!$hiddenlist.is(":visible")){
                $btn_text.text("点击隐藏全部音色");
                $hiddenlist.show();
                $icon.removeClass("glyphicon glyphicon-chevron-down").addClass("glyphicon glyphicon-chevron-up");
                $highLight.addClass("highLight");
            }else{
                $btn_text.text("点击显示全部音色");
                $icon.removeClass("glyphicon glyphicon-chevron-up").addClass("glyphicon glyphicon-chevron-down");
                $hiddenlist.hide();
                $highLight.removeClass("highLight");
            }
        })

    })
</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>